<template>
  <div class="v-chart-map">
    <ve-map :data="chartData" :settings="chartSettings" :events="chartEvents" height='500px'></ve-map>
    <!-- <img src="" alt=""> -->
  </div>
</template>

<script>
export default {
  name: '',
  data(){
    return {
      cityName: '',
      // chartData: {
      //     columns: ['位置', '会话数'],
      //     rows: [
      //       { '位置': '吉林', '会话数': '1 '},
      //     ]
      // }
    }
  },
  props:{
    chartData:{
      type:Object,
      default:function(){
        return {}
      }
    }
  },
  created(){
    this.chartSettings = {
        position: 'china',
        // selectData: true,
        selectedMode: 'single'
    };
    this.chartEvents = {
        click: (v) => {
          this.cityName = v.name
        }
    }
  },
  mounted(){

  },
  methods:{

  },
  components:{

  },
  computed:{

  },
  watch:{

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
.v-chart-map {
  width: 500px;
  margin: 0 auto;
}
</style>
